<template>
	<view class="shouhou">
		<view class="box">
			<view class="box-title">售后商品</view>
			<view class="item" v-for="(item,index) in data.goodsList" :key="index">
				<image :src="item.picUrl" mode="aspectFill"></image>
				<view class="item-box">
					<view class="item-box-view">{{item.goodsName}}</view>
					<view class="item-box-view1">规格：{{item.specifications[0]}}</view>
					<view class="item-box-view2">
						<text class="item-box-view2-text">￥{{item.price}}</text>
						<text class="item-box-view2-text1">x{{item.number}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-item" @click="show = true">
				<view class="box-item-left">申请原因</view>
				<view class="box-item-right">
					<text>{{content?content : '请选择'}}</text>
					<image src="../../static/xiayibu@2x.png" mode=""></image>
				</view>
			</view>
			
			<view class="box-item1">
				<view class="box-item1-title">收货状态</view>
				<view class="box-item1-content">
					<view :class="zhuangtaiListIndex===index?'active-box-item1-content-child' : 'box-item1-content-child'" v-for="(item,index) in zhuangtaiList" :key="index" @click="handleshouhuozhuangtai(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			
			<view class="box-item1">
				<view class="box-item1-title">我需要</view>
				<view class="box-item1-content">
					<view :class="xuyaoListIndex===index?'active-box-item1-content-child' : 'box-item1-content-child'" v-for="(item,index) in xuyaoList" :key="index" @click="handlexuyao(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			
			<view class="jine">退款金额   ￥{{data.actualPrice}}</view>
			
			<view class="intro">
				提交申请，等待商家同意后进行退货物流单号填写
			</view>
			<view class="kong">
				
			</view>
		</view>
		
		<view class="box-btn">
			<view class="btn" @click="handleshenqing">
				提交
			</view>
		</view>
		
		<u-select v-model="show" mode="single-column" :list="list" confirm-color="#333333" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				list: [{
					value: '尺码不合适',
					label: '尺码不合适'
				},{
					value: '我不想要了',
					label: '我不想要了'
				},{
					value: '不喜欢',
					label: '不喜欢'
				},{
					value: '质量问题',
					label: '质量问题'
				},{
					value: '与商家协商一致退款',
					label: '与商家协商一致退款'
				},{
					value: '未按约定时间发货',
					label: '未按约定时间发货'
				},{
					value: '包装/商品破损',
					label: '包装/商品破损'
				},{
					value: '少件/漏发',
					label: '少件/漏发'
				}],
				content:'',
				zhuangtaiList:[{
					name:'我已收到商品',
					type:1
				},{
					name:'暂未收到商品',
					type:2
				}],
				zhuangtaiListIndex:0,
				xuyaoList:[{
					name:'仅退款',
					type:1
				},{
					name:'退货退款',
					type:2
				}],
				xuyaoListIndex:0,
				orderId:'',
				data:'',
				share:uni.getStorageSync('share')
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.getorderDetails()
		},
		methods: {
			//订单详情
			async getorderDetails(){
				const params = {
					orderId:this.orderId
				}
				const res = await this.$u.api.orderDetails(params)
				this.data = res.data
			},
			//确定申请原因
			confirm(data){
				console.log(data)
				this.content = data[0].label
			},
			//收货状态
			handleshouhuozhuangtai(index){
				this.zhuangtaiListIndex = index
			},
			//我需要
			handlexuyao(index){
				this.xuyaoListIndex = index
			},
			//申请售后
			async handleshenqing(){
				const params = {
					orderId:this.orderId,
					afterSaleDescribe:this.content,
					applyAfterSaleTakeType:this.zhuangtaiList[this.zhuangtaiListIndex].type,
					applyAfterSaleType:this.xuyaoList[this.xuyaoListIndex].type
				}
				const res = await this.$u.api.applyAfterSale(params)
				const para = 'orderId=' + this.orderId
				uni.navigateTo({
					url:'/pages/shenqingshouhou/shenqingshouhou?' + para
				})
				uni.requestSubscribeMessage({
					tmplIds: ['5NgnciQc95AR_WNEisJlu3CLOTtoTTPySGhPN_chpro'],
					complete: (res) => {
						console.log(res,'999');
					
					}
				})
			}
		}
	}
</script>
<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
    .box{
		margin-top: 28rpx;
		padding: 28rpx;
		background: white;
	}
	.box-title{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 32rpx;
	}
	.item{
		margin-top: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.item image{
		width: 204rpx;
		height: 204rpx;
	}
	.item-box{
		flex: 1;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.item-box-view{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
	}
	.item-box-view1{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.item-box-view2{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.item-box-view2-text{
		font-size: 32rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #A93156;
		line-height: 38rpx;
	}
	.item-box-view2-text1{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}
	.box-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 28rpx;
        border-bottom: 0.5px solid #E3E3E3;
	}
	.box-item-left{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.box-item-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.box-item-right text{
		margin-right: 24rrpx;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.box-item-right image{
		width: 36rpx;
		height: 36rpx;
	}
	.box-item1{
		padding: 28rpx 0rpx;
		border-bottom: 0.5px solid #E3E3E3;
	}
	.box-item1-title{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.box-item1-content{
		padding: 28rpx 32rpx 0rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.box-item1-content-child{
		width: 286rpx;
		height: 84rpx;
		border: 1px solid #BD0632;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #BD0632;
		line-height: 84rpx;
		text-align: center;
	}
	.active-box-item1-content-child{
		width: 286rpx;
		height: 84rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 84rpx;
		text-align: center;
	}
	.jine{
		padding: 32rpx 0rpx 50rpx 0rpx;
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.intro{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
	}
	.kong{
		width: 100%;
		height: 180rpx;
	}
	.box-btn{
		padding: 10rpx 28rpx 0rpx 28rpx;
		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
        border-top: 0.5px solid #E3E3E3;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.btn{
		width: 694rpx;
		height: 84rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
	}
</style>
